/**
 * Renders into a Combo that allows choosing a style from a drop down list.
 * The drop down list's items have the style already applied.
 *
 * @author Lucian CIOROGA
 */
StyleChooserButton = Button.extend({
    /**
     * Constructor.
     * @param {String} id		The id of the button (should be unique).
     * @param {String} style	The initial value for the style property.
     * @param {Object} options	An option map for this button.
     *
     * Options are:
     * 		*			Inherited from Button.
     * 		values		Map of possible values; the <key> is the label that will be displayed,
     * 					while the <value> is the value that will be set.
     * 		stylize		Function that applies a style to an element displayed as an option in the select.
     * 					It gets 2 parameters: <element> and <value>. Basically, it allows the user to apply
     * 					format an option according to a style value associated with that option.
     */
    initialize: function(id, style, options){
        options.icon = 'images/arrow.gif';
        options.hover = 'images/arrow-hover.gif';
        
        this.style = style;
        
        this.parent(id, options);
    },
    
    /**
     * @param {StyleChooserButton} self
     * @param {Editor} editor
     */
    /*@Override*/
    build: function(self, editor){
        // the color chooser <div> - the popup that will apear onmouseover
        this.styleChooser = new Element('div', {
            'styles': {
                'background-color': '#f5f5f5',
                'border': '2px solid #ccc',
                'position': 'absolute',
                'padding': '5px'
            }
        });
        
        this.stylePreview = new Element('div', {
            'styles': {
                'float': 'left',
                'font-family': 'Trebuchet MS',
                'font-size': '12px',
                'padding-left': '5px'
            }
        });
        this.stylePreview.setText(this.style);
        
        if (window.webkit420) {
            // Safari text positioning fix
            this.stylePreview.setStyle('padding-top', '2px');
        }
        
        $each(this.options.values, function(data, key){
            var styleLine = new Element('div', {
                'styles': {
                    'text-align': 'left',
                    'color': '#333',
                    'font-family': 'Trebuchet MS',
                    'font-size': '12px'
                },
                'events': {
                    'click': function(){
                        this.setStyle('text-decoration', 'none');
                        self.styleChooser.remove();
                        self.stylePreview.setText(key);
                        self.execute(editor, data);
                    },
                    'mouseenter': function(){
                        this.setStyle('text-decoration', 'underline');
                    },
                    'mouseleave': function(){
                        this.setStyle('text-decoration', 'none');
                    }
                }
            });
            
            styleLine.setText(key);
            self.options.stylize(styleLine, data);
            
            self.styleChooser.adopt(styleLine);
        });
        
        // a new type of button
        var component = new Element('div', {
            'styles': {
                'height': '100%',
                'text-align': 'center',
                'cursor': 'pointer',
                'width': '100px'
            },
            'events': {
                'mouseenter': function(){
                    self.styleChooser.setOpacity(0);
                    this.adopt(self.styleChooser);
                    
                    var thisCoordinates = this.getCoordinates();
                    var chooserCoordinates = self.styleChooser.getCoordinates();
                    
                    if (chooserCoordinates.width < thisCoordinates.width) {
                        if (window.ie) {
                            self.styleChooser.setStyle('width', thisCoordinates.width + 4);
                        }
                        else {
                            self.styleChooser.setStyle('width', thisCoordinates.width - 12);
                        }
                    }
                    
                    self.styleChooser.setStyle('left', thisCoordinates.left + 1);
                    self.styleChooser.setStyle('top', thisCoordinates.top + 19);
                    
                    self.styleChooser.setOpacity(1);
                },
                'mouseleave': function(){
                    self.styleChooser.remove();
                }
            }
        });
        
        // loads the default button
        var button = this.parent(self, editor);
        
        button.setStyle('float', 'right');
        component.adopt(button);
        component.adopt(this.stylePreview);
        
        return component;
    }
});
